<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>学生选课管理系统</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link href="/assets/css/bootstrap.css" rel="stylesheet" />
        <link href="/assets/css/main.css" rel="stylesheet" />
        <link rel="stylesheet" href="/assets/css/iconfont.css">
        <link rel="stylesheet" href="/assets/css/tip-green.css">
        <link rel="stylesheet" href="/assets/css/my.css">
        <link rel="icon" href="/assets/img/ico/favicon.ico" type="image/png">
    </head>
    <body>
        <% include ../common/header.ejs %>
        <% include ../common/siderbar.ejs %>
        <div id="content">
            <div class="content-wrapper">
                <div class="row">
                    <div class="col-lg-12 heading">
                        <ul class="nav nav-tabs">
                            <li><a href="/admin/student">学生清单</a></li>
                            <li><a href="/admin/student/import">导入学生</a></li>
                            <li class="active"><a href="javasctipt:;">逐个增加学生</a></li>
                        </ul>
                    </div>
                </div>

                <div class="panel panel-default">
                    <div class="panel-body">
                        <a id="show_tips" href="#"></a>
                        <div class="form-horizontal">
                            <div class="form-group">
                                <label for="sid" class="col-sm-2 control-label">学号</label>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control" id="sid" placeholder="请输入学生学号" checkinvalid>
                                </div>
                                <div class="alert alert-info tips-sid" role="alert">学号为 9 为数字</div>
                            </div>
                            <div class="form-group">
                                <label for="sname" class="col-sm-2 control-label">姓名</label>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control" id="sname" placeholder="请输入学生姓名" checkinvalid>
                                </div>
                                <div class="alert alert-info tips-sname" role="alert">姓名只能为中文，不能包含数字和字母，长度为2-4位</div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">性别</label>
                                <div class="col-sm-4">
                                    <label class="radio-inline">
                                        <input type="radio" name="sex" value="男" checked checkinvalid> 男
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" name="sex" value="女"> 女
                                    </label>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">年级</label>
                                <div class="col-sm-8">
                                    <label class="radio-inline">
                                        <input type="radio" name="grade" value="初一" checked> 初一
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" name="grade" value="初二"> 初二
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" name="grade" value="初三"> 初三
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" name="grade" value="高一"> 高一
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" name="grade" value="高二"> 高二
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" name="grade" value="高三"> 高三
                                    </label>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="password" class="col-sm-2 control-label">密码</label>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control" id="password" placeholder="请输入学生密码" checkinvalid>
                                </div>
                                <div class="alert alert-info tips-password" role="alert">密码必须为 6 位或以上，需包含数字和字母</div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-offset-4 col-sm-10">
                                    <button class="btn btn-success form-submit" disabled>保存</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="clearfix"></div>
        </div>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script src="/assets/js/bootstrap/bootstrap.js"></script>
        <script src="/assets/js/jquery.poshytip.js"></script>
    </body>
</html>
<script>
    $(function () {
        var valid_last = false;

        var valid = {
            sid: false,
            sname: false,
            password: false
        }

        // 校验学号
        $("#sid").on("input", function () {
            var val = $(this).val();
            var reg = /^[\d]{9}$/
            if (!reg.test(val)) {
                valid.sid = false;
                valid_last = false;
                $(".form-submit").attr('disabled', true);
                $(".tips-sid").removeClass('alert-success').addClass('alert-info').html('学号格式不正确，需为 9 位数字');
                return
            }else {
                //校验学号是否存在
                $.ajax({
                    url: '/student/' + val,
                    type: 'propfind',
                    success: function (data) {
                        if (data.result === 0) {
                            console.log('名字可用')
                            valid.sid = true
                            $(".tips-sid").removeClass('alert-info').addClass('alert-success').html('当前学号可用！')
                            //实时更新按钮状态按钮
                            var flag = 0

                            for (var key in valid) {
                                if (!valid[key]) {
                                    break
                                }
                                flag ++;
                            }

                            if (flag === 3) {
                                $(".form-submit").attr('disabled', false);
                            }else {
                                $(".form-submit").attr('disabled', true);
                            }

                        }else {
                            valid.sid = false
                            valid_last.sid = false
                            $(".tips-sid").removeClass('alert-success').addClass('alert-info').html('当前学号已经被占用！')
                        }

                    }
                })
            }


        })

        //校验姓名
        $("#sname").on("input", function () {
            var val = $(this).val();
            var reg = /^[\u4E00-\u9FA5]{2,4}$/;
            if (reg.test(val)) {
                valid.sname = true;
                $(".tips-sname").removeClass('alert-info').addClass('alert-success').html('姓名格式输入正确！')
            }else {
                valid.sname = false;
                valid_last.sid = false
                $(".tips-sname").removeClass('alert-success').addClass('alert-info').html('姓名只能为中文，不能包含数字和字母，长度为2-4位');
            }

            var flag = 0
            for (var key in valid) {
                if (!valid[key]) {
                    break
                }
                flag ++;
            }

            if (flag === 3) {
                $(".form-submit").attr('disabled', false);
            }else {
                $(".form-submit").attr('disabled', true);
            }

        })

        //校验密码
        $("#password").on("input", function () {
            var val = $(this).val();
            var lv = checkStrength(val);
            if (lv >= 2) {
                valid.password = true;
                $(".tips-password").removeClass('alert-info').addClass('alert-success').html('密码校验合格，当前密码强度等级为：' + lv)
            }else {
                valid.password = false;
                valid_last.sid = false
                $(".tips-password").removeClass('alert-success').addClass('alert-info').html('密码等级太低，当前密码强度等级为' + lv + '，请使用数字+字母组合！');
            }

            var flag = 0

            for (var key in valid) {
                if (!valid[key]) {
                    break
                }
                flag ++;
            }

            if (flag === 3) {
                $(".form-submit").attr('disabled', false);
            }else {
                $(".form-submit").attr('disabled', true);
            }

        })

        //提交保存表单
        $(".form-submit").click(function () {
            // alert(123)
            for (var key in valid) {
                if (valid[key]) {
                    valid_last = true
                }else {
                    valid_last = false
                    break
                }
            }

            if (valid_last) {
                var sid = $("#sid").val();
                var sname = $("#sname").val();
                var sex = $("input[name=sex]:checked").val();
                var grade = $("input[name=grade]:checked").val();
                var password = $("#password").val();
                $.ajax({
                    url: '/admin/student/add',
                    type: 'post',
                    data: {
                        sid,
                        sname,
                        sex,
                        grade,
                        password
                    },
                    success: function (data) {
                        var content = '';
                        if (data.result == "1") {
                            content = '添加学生信息成功'
                        } else {
                            content = data.result;
                        }
                        $('#show_tips').poshytip({
                            content: content,
                            className: 'tip-green',
                            showOn: 'none',
                            alignTo: 'target',
                            alignX: 'inner-left',
                            offsetX: -10,
                        }).poshytip('show').poshytip('hideDelayed', 3000);
                        $("#list").trigger("reloadGrid");

                        //添加成功后清空选择框
                        $("#sid").val('')
                        $("#sname").val('')
                        $("input[name=sex]").eq(0).prop("checked", true);
                        $("input[name=grade]").eq(0).prop('checked', true)
                        $("#password").val('')
                        for (var key in valid) {
                            valid[key] = false
                        }
                        valid_last = false
                        valid_last.sid = false
                        $(".form-submit").attr('disabled', true);
                    }
                })
            }
        })


        // 密码强度校验
        function checkStrength (val){
            var lv = 0;
            if (val.match(/[a-z]/g)) {
                lv ++;
            }
            if (val.match(/[0-9]/g)){
                lv ++;
            }
            if (val.match(/(.[^a-z0-9])/g)){
                lv ++;
            }
            if (val.length < 6){
                lv = 0;
            }
            if (lv > 3){
                lv = 3;
            }
            return lv
        };

    })
</script>